<template>
    <dv-border-box1>
        <div class="title">隐患整改完成时间</div>
        <div class="block">
            <el-date-picker class="test" style="width: 120px" size="default" v-model="value2" type="month"
                placeholder="选择月" value-format="YYYY-MM">
            </el-date-picker>
        </div>
        <markListDia ref="markList"></markListDia>
        <el-dialog :fullscreen="fullscreen" v-model="tableDialog.tableDialogVisabled" width="1200px" destroy-on-close
            :close-on-click-modal="false">

            <div class="avue-crud__dialog__menu">
                <img @click="fullscreen = !fullscreen" class="quan" src="@/assets/images/quan.png" alt="">
            </div>
            <component :is="dom[tableDialog.tableComponentName]" :data="tableDialog.earlyWarning" :patrol_status="1"
                :drillTrainType="tableDialog.drillTrainType">
            </component>
        </el-dialog>
        <veEcharts v-if="activeIndex === 2" :option="option2" :on-mouseclick="showTableList" />
    </dv-border-box1>
</template>

<script lang="ts" setup>
import { ref, reactive, shallowReactive, watch } from 'vue'
import veEcharts from './veEcharts.vue'
import echarts from '@/util/echarts'
import { mockMonths } from '@/util/utils'
import markListDia from './safeMarks/components/markListDia.vue'
import unitMange from './safeMarks/components/unitMange.vue'
import dangerWcl from './safeMarks/components/dangerWcl.vue'
import drillTrain from './safeMarks/components/drillTrain.vue'
import overtimeHighBuildingUnitTotal from './safeMarks/components/overtimeHighBuildingUnitTotal.vue'
import faceRecognitionMismatch from './safeMarks/components/faceRecognitionMismatch.vue'
import workOrderTotal from './safeMarks/components/workOrderTotal.vue'
import outPlanLocationTotal from './safeMarks/components/outPlanLocationTotal.vue'
import notOnTimeGive from './safeMarks/components/notOnTimeGive.vue'
import twoMonthDangerUnitSourceWbTotal from './safeMarks/components/twoMonthDangerUnitSourceWbTotal.vue'
import thirdOneClose from './safeMarks/components/thirdOneClose.vue'
import hiddenDangerMange from './safeMarks/components/hiddenDangerMange.vue'
import thermalPowerList from './safeMarks/components/thermalPowerList.vue'
import flueClean from './safeMarks/components/flueClean.vue'
import study from './safeMarks/components/study.vue'
import unitTaskMange from './safeMarks/components/unitTaskMange.vue'
import pinggubaogao from '@/views/pinggubaogao/index.vue'
import activity from '@/views/activity/activity.vue'
import rehearsal from '@/views/rehearsal/rehearsal.vue'
import { yinhuanzhenggai } from '@/api/dashboard'
const dom = shallowReactive({
    unitMange,
    dangerWcl,
    drillTrain,
    study,
    activity,
    rehearsal,
    pinggubaogao,
    unitTaskMange,
    overtimeHighBuildingUnitTotal,
    faceRecognitionMismatch,
    workOrderTotal,
    outPlanLocationTotal,
    notOnTimeGive,
    flueClean,
    thermalPowerList,
    hiddenDangerMange,
    thirdOneClose,
    twoMonthDangerUnitSourceWbTotal
})
const activeIndex = ref(2)
const value2 = ref('')
let fullscreen = ref(false)

watch(value2, () => {
    getList()
})
const chartData = ref([
    {
        id: 0,
        name: '未整改',
        value: 0,
        component: 'dangerWcl',
        type: 'bar'
    },
    {
        id: 1,
        name: '未演练',
        value: 0,
        component: 'rehearsal',
        type: ''
    },
    {
        id: 2,
        name: '未培训',
        value: 0,
        component: 'activity',
        type: ''
    },
    {
        id: 3,
        name: '未评估',
        value: 0,
        component: 'pinggubaogao',
        type: ''
    },
    {
        id: 4,
        name: '未审核',
        value: 0,
        component: 'unitTaskMange',
        type: ''
    },
    {
        id: 5,
        name: '未学习',
        value: 0,
        component: 'study',
        type: ''
    },
    {
        id: 6,
        name: '未清洗',
        value: 0,
        component: 'flueClean',
        type: ''
    },
    {
        id: 7,
        name: '未申报',
        value: 0,
        component: 'thermalPowerList',
        type: ''
    },
    {
        id: 8,
        name: '随手拍',
        value: 0,
        component: 'hiddenDangerMange',
        type: ''
    },
    {
        id: 9,
        name: '未巡查',
        value: 0,
        component: 'unitMange',
        type: ''
    }
])
const chartData2 = ref([
    {
        id: 0,
        name: '未整改',
        value: 0,
        component: 'dangerWcl',
        type: 'bar'
    },
    {
        id: 1,
        name: '未演练2',
        value: 0,
        component: 'rehearsal',
        type: ''
    },
    {
        id: 2,
        name: '未培训2',
        value: 0,
        component: 'activity',
        type: ''
    },
    {
        id: 3,
        name: '未评估2',
        value: 0,
        component: 'pinggubaogao',
        type: ''
    },
    {
        id: 4,
        name: '未审核',
        value: 0,
        component: 'unitTaskMange',
        type: ''
    },
    {
        id: 5,
        name: '未学习',
        value: 0,
        component: 'study',
        type: ''
    },
    {
        id: 6,
        name: '未清洗',
        value: 0,
        component: 'flueClean',
        type: ''
    },
    {
        id: 7,
        name: '未申报',
        value: 0,
        component: 'thermalPowerList',
        type: ''
    },
    {
        id: 8,
        name: '随手拍',
        value: 0,
        component: 'hiddenDangerMange',
        type: ''
    },
    {
        id: 9,
        name: '未巡查',
        value: 0,
        component: 'unitMange',
        type: ''
    }
])
// data: ['未及时巡查检查', '未及时整改巡查检查不合格项', '未及时组织消防演练', '未及时组织消防培训','高层民用建筑未及时完成消防安全评估','巡查待审核','三关一闭','未学习','烟道清洗逾期','动火动电','随手拍','网格员巡查'],
const option2 = {
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'shadow'
        },
        backgroundColor: 'rgba(0,0,0, 0.5)',
        textStyle: {
            color: '#fff',
            fontFamily: 'myFont'
        },
        formatter: function (params) {
            if (params[1].name.includes('2')) {
                return params[0].axisValueLabel + '有效期' + ' ' + params[1].value + '天'
            }
            return params[0].axisValueLabel + '逾期' + ' ' + params[0].value + '天'
        }
    },
    grid: {
        borderWidth: 0,
        top: 40,
        left: 50,
        bottom: 100,
        textStyle: {
            color: '#fff'
        }
    },
    xAxis: {
        data: [
            '未及时整改巡查检查不合格项',
            '未及时组织消防演练',
            '未及时组织消防培训',
            '高层民用建筑未及时完成消防安全评估',
            '巡查待审核',
            '未学习',
            '烟道清洗逾期',
            '动火动电',
            '公众举报',
            '网格员巡查'
        ],
        axisLabel: {
            inside: false,
            interval: 0,
            formatter: function (value) {
                let text = ''
                //x轴的文字改为竖版显示
                switch (value) {
                    case '未及时整改巡查检查不合格项':
                        text = '未整改'
                        break
                    case '未及时组织消防演练':
                        text = '未演练'
                        break
                    case '未及时组织消防培训':
                        text = '未培训'
                        break
                    case '高层民用建筑未及时完成消防安全评估':
                        text = '未评估'
                        break
                    case '巡查待审核':
                        text = '未审核'
                        break
                    case '未学习':
                        text = '未学习'
                        break
                    case '烟道清洗逾期':
                        text = '未清洗'
                        break
                    case '动火动电':
                        text = '未申报'
                        break
                    case '公众举报':
                        text = '随手拍'
                        break
                    case '网格员巡查':
                        text = '未巡查'
                        break
                    default:
                        break
                }
                return `${text.split('').join('\n')}`
            },
            textStyle: {
                fontSize: 14,
                color: '#fff',
                fontFamily: 'myFont'
            },
            fontSize: 14
        },
        axisTick: {
            show: false
        },
        axisLine: {
            show: false
        },
        z: 10
    },
    yAxis: {
        name: '消除时间（天）',
        nameTextStyle: {
            color: '#fff',
            padding: [0, 0, 0, 60],
            fontSize: 14,
            fontFamily: 'myFont'
        },
        axisLine: {
            show: true
        },
        axisTick: {
            show: false
        },
        axisLabel: {
            color: '#fff',
            fontSize: 14
        }
    },
    dataZoom: [
        {
            type: 'inside'
        }
    ],
    series: [
        {
            type: 'bar',

            //   showBackground: true,
            emphasis: {
                focus: 'series'
            },
            itemStyle: {
                color: new echarts.graphic.LinearGradient(0, 0, 1, 1, [
                    {
                        offset: 0,
                        color: '#ff974c'
                    },
                    {
                        offset: 1,
                        color: 'rgba(221, 186, 61, 0.10)'
                    }
                ])
            },
            data: chartData.value
        },
        {
            type: 'bar',
            //   showBackground: true,
            emphasis: {
                focus: 'series'
            },
            itemStyle: {
                color: new echarts.graphic.LinearGradient(0, 0, 1, 1, [
                    {
                        offset: 0,
                        color: '#91cc75'
                    },
                    {
                        offset: 1,
                        color: 'rgba(221, 186, 61, 0.10)'
                    }
                ])
            },
            data: chartData2.value
        }
    ]
}

const markList = ref()
const showTableList = (e: any) => {
    console.log(e)
    switch (e.name) {
        case '随手拍':
            markList.value.init()
            break
        default:
            console.log(e.data.component)
            e.data.component && showTableComponent(e.data.component, e.data.type)
            break
    }

    //   showTableComponent('drillTrain', 'overtimeDrillUnitTotal')
}

const tableDialog = reactive({
    tableDialogVisabled: false,
    tableComponentName: '',
    earlyWarning: 0,
    drillTrainType: ''
})

const showTableComponent = (component: string, type: string) => {
    console.log(component, type)
    if (component === 'unitMange') {
        tableDialog.earlyWarning = 10
    }
    if (type) {
        tableDialog.drillTrainType = type
    }
    tableDialog.tableComponentName = component
    tableDialog.tableDialogVisabled = true
}

const getList = async () => {
    const { data } = await yinhuanzhenggai({ data_time: value2.value })
    chartData.value[0].value = data.num1
    chartData.value[1].value = data.num2
    chartData.value[2].value = data.num4
    chartData.value[3].value = data.num6
    chartData.value[4].value = data.num8
    chartData.value[5].value = data.num9
    chartData.value[6].value = data.num10
    chartData.value[7].value = data.num11
    chartData.value[8].value = data.num12
    chartData.value[9].value = data.num13
    chartData2.value[1].value = data.num3
    chartData2.value[2].value = data.num5
    chartData2.value[3].value = data.num7
}
getList()
</script>

<style lang="scss" scoped>
.dv-border-box-1 {
    font-size: 14px;

    .title {
        color: #edf4ff;
        height: 20px;
        font-family: 'myFont';
        font-size: 20px;
    }

    .block {
        position: absolute;
        width: 100px;
        top: 20px;
        right: 34px;
        z-index: 8;
    }

    .tag-wrap {
        display: flex;
        justify-content: end;
        padding: 10px 15px 0;

        .tag {
            background: linear-gradient(270deg, rgba(2, 29, 78, 0.681) 0%, rgba(31, 215, 232, 0.873) 280%);
            border: 1px solid #1f99c7;
            border-radius: 10px;
            color: #1f99c7;
            font-size: 12px;
            padding: 2px 4px;
            margin-right: 15px;
            cursor: pointer;
            transition: all 0.3s;

            &:hover {
                color: #2989f8;
                box-shadow: 0 0 10px rgb(0, 140, 255);
            }
        }

        .active {
            color: #2989f8;
            box-shadow: 0 0 10px rgb(0, 140, 255);
        }
    }

    .line {
        width: 100%;
        height: 300px;
    }
}

:deep(.block .test .el-input__wrapper) {
    background: #0a1c3a;

    .el-input__prefix {
        color: #fff;
    }

    .el-input__inner {
        color: #fff;
    }

    input::-webkit-input-placeholder {
        color: #fff;
    }
}
</style>
